/*
 * @Description: 每一个阶段种各个情感的最具有代表性的书籍展示
 * @Author: zy
 * @Date: 2020-12-18 15:02:24
 * @LastEditors: Wuyi
 * @LastEditTime: 2021-05-02 15:24:35
 */
import * as d3 from 'd3'
export class TestReadPath {
  color = d3.scaleOrdinal(d3.schemeCategory10)

  constructor (divId) {
    this.divId = divId
    this.initChart()
  }

  initChart () {
    this.chart = {}
    this.chart.padding = {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10
    }
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight -
          this.chart.padding.top -
          this.chart.padding.bottom
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth -
          this.chart.padding.left -
          this.chart.padding.right

    this.chart.svg = d3
      .select('#' + this.divId)
      .append('svg')
      .attr('width', this.chart.divWidth +
        this.chart.padding.left +
        this.chart.padding.right
      )
      .attr('height', this.chart.divHeight +
        this.chart.padding.top +
        this.chart.padding.bottom
      )
      .attr('class', 'svg_chart')
  }

  setData (data) {
    this.data = data
    this.initData = ['grade1-2', 'grade3-4', 'grade5-6']
  }

  computeLayOut () {
    const height = this.chart.divHeight / 3
    const width = this.chart.divWidth / 8
    this.chart.rectWidth = width
    this.chart.itemWidth = width * 2.25
    this.chart.itemHeight = height
    this.chart.rectHeight = height * 0.95
    this.chart.rectPadding = width * 1.25
  }

  render () {
    this.computeLayOut()
    let rect = this.chart.svg.selectAll('.book')
      .data(this.initData)

    let rectEnter = rect.enter()
      .append('g')
      .attr('class', 'book')
      .attr('id', function (d, i) {
        return d
      })

    rectEnter.append('rect')
      .attr('x', (_, i) => {
        return this.chart.rectPadding + this.chart.itemWidth * i
      })
      .attr('y', this.chart.itemHeight)
      .attr('rx', 20)
      .attr('width', this.chart.rectWidth)
      .attr('height', this.chart.rectHeight)
      .attr('fill', (_, i) => this.color(i))
      .style('stroke', (_, i) => this.color(i))
      .style('stroke-width', 1)

    rectEnter.append('text')
      .attr('x', (_, i) => {
        return this.chart.rectPadding + this.chart.itemWidth * i + this.chart.rectWidth / 3.5
      })
      .attr('y', this.chart.itemHeight + this.chart.itemHeight / 2)
      .text(d => d)
      .attr('font-size', 20)

    let links = this.chart.svg.selectAll('.link')
      .data(this.initData.slice(0, 2))

    let linksEnter = links.enter()
      .append('g')
      .attr('class', 'lnik')

    linksEnter.append('line')
      .attr('x1', d => {
        let book1 = this.chart.svg.select('#' + d)
        return book1.select('rect').attr('x')
      })
      .attr('y1', d => {
        let book1 = this.chart.svg.select('#' + d)
        return book1.select('rect').attr('y')
      })
      .attr('x2', (d, i) => {
        let book2 = this.chart.svg.select('#' + this.initData[i + 1])
        return book2.select('rect').attr('x')
      })
      .attr('y2', (d, i) => {
        let book2 = this.chart.svg.select('#' + this.initData[i + 1])
        return book2.select('rect').attr('y')
      })
      .style('stroke-width', 2)
      .style('stroke', 'red')
      // .attr('d', (d, i) => {
      //   let book1 = this.chart.svg.select('#' + d)
      //   let book2 = this.chart.svg.select('#' + this.initData[i + 1])
      //   console.log(book1.select('rect').attr('x'))
      //   console.log(book1.select('rect').attr('y'))
      //   console.log()
      //   let start = {
      //     x: book1.select('rect').attr('x'),
      //     y: book1.select('rect').attr('y')
      //   }
      //   let end = {
      //     x: book2.select('rect').attr('x'),
      //     y: book2.select('rect').attr('y')
      //   }
      //   return diagonal(start, end)
      // })
      // .style('strok', 'red')
      // .style('strok-width', 5)

    function diagonal (s, d) {
      let path = `M ${s.x} ${s.y}
      C ${s.x} ${s.y},
        ${d.x} ${(s.y + d.y) / 2},
        ${d.x} ${d.y}`
      console.log(path)
      return path
    }
  }
}
